<template>
  <div class="app-container">
    <div>
      <el-button type="primary" icon="el-icon-refresh" size="small" @click="init()">刷新</el-button>
      <el-input
        placeholder="请输入内容"
        v-model="search"
        suffix-icon="el-icon-search"
        size="small"
        class="search-input"
        clearable>
      </el-input>
      <el-select class="select-input" size="small" v-model="value" placeholder="选择合同类型">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div>
      <el-dialog title="合同详情" :visible.sync="contractShow" width="84%">
      </el-dialog>
      <!--   合同概览   -->
      <el-table
        ref="multipleTable"
        :data="contractList"
        tooltip-effect="dark"
        style="width: 100%"

        >
        <el-table-column
          type="selection"
          width="55"
          fixed>
        </el-table-column>
        <el-table-column
          label="合同编号"
          width="120"
          fixed>
          <template slot-scope="scope"><el-link type="primary" @click="getContract(scope.row)">{{ scope.row.contractNum }}</el-link></template>
        </el-table-column>
        <el-table-column
          prop="supplier"
          label="供方"
          width="120">
        </el-table-column>
        <el-table-column
          prop="transportWay"
          label="运输方式"
          width="120"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="effectiveTimeBegin"
          label="合同开始时间"
          width="120"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="effectiveTimeEnd"
          label="合同结束时间"
          width="120"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          width="120"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="paymentDate"
          label="计划回款日期"
          width="120"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="amount"
          label="总金额"
          width="120"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          width="120">
            <el-button size="mini" fixed="right" @click="startApprove(scope.row)">YES</el-button>
            <el-button size="mini" fixed="right" @click="startApprove(scope.row)">REJECT</el-button>
        </el-table-column>
      </el-table>
      <!--   分页   -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[5,10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>

import {getContractList,addOrUpdate,getContract,delContract,startApprove} from '@/api/contract'
export default {
  data() {
    return {
       activeNames: ['合同头'],
      updatePermit:false,
      total:10,
      pageNo:1,
      pageSize:10,
      rules: {
        // contractNum: [
        //   {required: true, message: '请输入客户ID', trigger: 'blur'}
        // ],
        foreignTrade: [
          {required: true, message: '请输入外贸', trigger: 'blur'}
        ],
        amount:[
          {required: true, message: '合同总金额不能为空',trigger: 'blur'}
        ],
        paymentDate:[
          {required: true, message: '计划回款日期不能为空',trigger: 'blur'}
        ],
        contractCode:[
          {required: true, message: '合同特征码不能为空',trigger: 'blur'}
        ],
        manageType:[
          {required: true, message: '管理分类不能为空',trigger: 'blur'}
        ],
        clientId: [
          { required: true, message: '请输入客户ID', trigger: 'blur' },
          { min: 8, max: 15, message: '长度在 8 到 15 个字符', trigger: 'blur' }
        ],
      },
      contractForm:{
        contractNum:'',
        contractName:'',
        serviceType:'',
        foreignTrade:'',
        compilationDate:'',
        supplier:'',
        contractTemplate:'',
        transportWay:'',
        effectiveTimeBegin:'',
        signAddress:'',
        contractType:'',
        serviceWorker:'',
        effectiveTimeEnd:'',
        state:'',
        demandCustomers: '',
        amount:'',
        paymentDate:'',
        contractCode:'',
        manageType:'',
        remark:'',
        salesMan:'',
        department:'',
        contractDetailList:[{
          productName:'',
          productSize:'',
          quantity:'',
          unit:'',
          unitPrice:'',
          taxCode:'',
          preTaxUnitPrice:'',
          preTaxUnitAmount:'',
          currency:'',
          amount:'',
          exchangeRate:'',
          dollar:'',
          RMB:'',
          packSize:'',
          pack:'',
          qualityStand:'',
          tradeTerms:'',
          library:'',
          lineRemark:'',
          changes:'',
          changesReason:''
      }]
        },
      contractShow: false,
      totalPage:'',
      pageNo:1,
      pageSize:10,
      contractShow: false,
      contractList: [],
      multipleSelection: [],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      search:'',
      value:''
    }
  },
  created() {
    this.init()
  },
  methods: {
    deleteContract(row){
      delContract(row.contractNum).then(res=>{
        console.log(res);
        if(res.code==20000){
          this.$message.success(res.message)
        }
      })
      this.init()
    },

    //更新或者新增
    updateForm(){
      this.$refs["contractForm"].validate((valid) => {
        if (valid) {
          let data = this.contractForm
          addOrUpdate(data).then(res=>{
            if(res.code==20000){
          this.$message.success(res.message)
          this.contractShow = false
          this.init()
            }
          }).catch(err=>{
            {
            this.$message.error('操作失败',err.message)
          }
          })
        }
      });

    },
    cancel(){
      this.contractShow = false
    },
    addContract(){
      this.contractForm={
         contractDetailList:[{
          productName:'',
          productSize:'',
          quantity:'',
          unit:'',
          unitPrice:'',
          taxCode:'',
          preTaxUnitPrice:'',
          preTaxUnitAmount:'',
          currency:'',
          amount:'',
          exchangeRate:'',
          dollar:'',
          RMB:'',
          packSize:'',
          pack:'',
          qualityStand:'',
          tradeTerms:'',
          library:'',
          lineRemark:'',
          changes:'',
          changesReason:''
      }]
      }
      this.contractShow = true
      this.updatePermit=false
      this.contractShow = true
    },
    startUpdate(){
      this.contractShow = true
      this.updatePermit=false
    },

    removeItem(index){
      if (this.contractForm.contractDetailList.length<=1){
        this.$message.info("不允许删除所有合同行！")
        return
      }
       this.contractForm.contractDetailList.pop(index)
    },
    addItem(){
      let item ={}

      this.contractForm.contractDetailList.push(item)
    },
    handleChange(val) {
      console.log(val);
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.init(this.pageNo,this.pageSize)
    },
    handleCurrentChange(val) {
      this.pageNo = val
      this.init(this.pageNo,this.pageSize)
    },
    init(pageNo,pageSize){
      getContractList({pageNo, pageSize}).then(res=>{
        this.contractList = res.data.records
        this.total = res.data.total
        this.pageNo = res.data.current
        this.pageSize = res.data.size
        this.totalPage=res.data.pages
      })
    },
    startApprove(row){
      startApprove({contractNum:row.contractNum}).then(res=>{
        if (res.code==20000) {
         this.$message(res.data)
    }})
    },
  getContract(row){
      this.updatePermit = true
      this.contractForm = row
      this.contractShow = true
      getContract(row.contractNum).then(res=>{
        this.contractForm=res.data;

      })

    }

  }
}
</script>

<style scoped>
  .search-input{
    float: right;
    width: 200px;
  }
  .select-input{
    float: right;
    width: 150px;
    margin-right: 10px;
  }
</style>

